<template>
  <div style="background: #ececec;padding-bottom:100px;height:100%">
    <!-- <van-nav-bar @click-left="onClickLeft" fixed>
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
    </van-nav-bar> -->
    <!-- tabs -->
    <div class="tabs" fixed>
      <div class="tab_list1" @click="list1" id="active">已借出</div>
      <div class="tab_list2" @click="list2">已借到</div>
      <div class="tab_list3" @click="list3">历史记录</div>
    </div>
    <div class="box">
      <!-- <div class="rent_card" v-for="(item, index) in lbook" :key="index">
        <div class="rent_card_left">
          <img src="item.image" alt="" />
        </div>
        <div class="rent_card_right">
          <div class="rent_card_title">{{ item.bookName }}</div>
          <div class="rent_card_user">借阅人：{{ item.borrower }}</div>
          <div class="rent_card_list">
            <div class="rent_card_phone">{{ item.phone }}</div>
            <div class="rent_card_address">{{ item.address }}</div>
          </div>
          <div class="rent_card_date">剩余归还日期：{{ item.day }}天</div>
        </div>
      </div> -->

      <!--rent——card_start  -->
      <div class="rent_card">
        <div class="rent_card_left">
          <img src="../../assets/global/img/book4.jpg" alt="" />
        </div>
        <div class="rent_card_right">
          <div class="rent_card_title">云边有个小卖部</div>
          <div class="rent_card_user">借阅人：王xx</div>
          <div class="rent_card_list">
            <div class="rent_card_phone">15345687954</div>
            <div class="rent_card_address">广东省广州市越秀区xxx</div>
          </div>
          <div class="rent_card_date">剩余归还日期：10天</div>
        </div>
      </div>
      <div class="rent_card">
        <div class="rent_card_left">
          <img src="../../assets/global/img/book4.jpg" alt="" />
        </div>
        <div class="rent_card_right">
          <div class="rent_card_title">云边有个小卖部</div>
          <div class="rent_card_user">借阅人：王xx</div>
          <div class="rent_card_list">
            <div class="rent_card_phone">15345687954</div>
            <div class="rent_card_address">广东省广州市越秀区xxx</div>
          </div>
          <div class="rent_card_date">剩余归还日期：10天</div>
        </div>
      </div>
      <!-- rent_card_end-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "a",
      lbook: "",
      owner: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/cumster");
    },
    list1() {
      this.$router.push("/rent");
    },
    list2() {
      this.$router.push("/rented");
    },
    list3() {
      this.$router.push("/record");
    },
    // mgop---已借到  此处owner为系统用户
    getRentBook(owner) {
      console.log(owner);
      const params = new URLSearchParams();
      params.append("owner", this.owner);
      const rentBook = async () => {
        const res = await this.mgopfn("mgop.educational.system.hasLend", {
          owner: this.owner,
        });
        console.log(res);
        this.lbook = res.data.hasLend;
      };
      rentBook();
    },
    // 本地---已借到
    async getRent() {
      const params = new URLSearchParams();
      params.append("owner", this.owner);
      const res = await this.http.formPost("/hasLend", params);
      // console.log(res);
      this.lbook = res.hasLend;
      // console.log("---已借出----");
      this.getRentBook(this.owner);
    },
  },
  mounted() {
    // console.log(this.$route.query.username);
    // this.owner = this.$route.query.username;
    this.owner = window.localStorage.getItem("usernameData");
    console.log("owner：" + this.owner);
    this.getRent();
    this.getRentBook();
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 320px) {
  .tabs {
    width: 100%;
    height: 60px;
    background: #5a78ec;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    padding-top: 10px;
    top: -10px;
    position: fixed;

    /* margin-top: 36px; */
    z-index: 1000;
  }
  .tab_list1,
  .tab_list2,
  .tab_list3 {
    display: block;
    margin-top: 20px;
    color: #fff;
  }
  .tab_list1:hover,
  .tab_list2:hover,
  .tab_list3:hover {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 18px;
    border-bottom: 4px solid #fff;
  }
  #active {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 18px;
    border-bottom: 4px solid #fff;
  }
  .box {
    width: 100%;
    height: 100%;
    background: #ececec;
    /* background: pink; */
    z-index: -1;
  }
  .rent_card {
    width: 90%;
    height: 150px;
    /* background: pink; */
    background: #ffffff;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 14px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    top: 60px;
  }
  .rent_card_left {
    width: 35%;
    height: 130px;
    /* border: 1px solid #333; */
    float: left;
    border-radius: 10px;
    margin-left: 14px;
  }
  .rent_card_left img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .rent_card_right {
    width: 60%;
    height: 130px;
    /* background: #fff; */
    float: left;
    margin-left: 10px;
  }
  .rent_card_title {
    font-weight: bolder;
    font-size: 16px;
  }
  .rent_card_user {
    font-size: 14px;
    font-weight: 400;
  }
  .rent_card_list {
    width: 160px;
    height: 50px;
    font-size: 10px;
    color: #a6a6a6;
    /* background: pink; */
  }
  .rent_card_phone {
    border-radius: 20px;
    display: inline-block;
    padding: 2px 5px;
    margin-top: 8px;
    border: 1px solid #a6a6a6;
  }
  .rent_card_address {
    border-radius: 20px;
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid #a6a6a6;
    font-size: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .rent_card_date {
    display: inline-block;
    background: #43cf7c;
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    margin-top: 16px;
  }
}
@media screen and (min-width: 375px) {
  .tabs {
    width: 100%;
    height: 60px;
    background: #5a78ec;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    position: fixed;
    /* margin-top: 36px; */
    z-index: 1000;
  }
  .tab_list1,
  .tab_list2,
  .tab_list3 {
    display: block;
    margin-top: 20px;
    color: #fff;
  }
  .tab_list1:hover,
  .tab_list2:hover,
  .tab_list3:hover {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 18px;
    border-bottom: 4px solid #fff;
  }
  #active {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 18px;
    border-bottom: 4px solid #fff;
  }
  .box {
    width: 100%;
    height: 800px;
    background: #ececec;
    z-index: -1;
  }
  .rent_card {
    width: 90%;
    height: 180px;
    /* background: pink; */
    background: #ffffff;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 14px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    top: 70px;
  }
  .rent_card_left {
    width: 35%;
    height: 160px;
    /* border: 1px solid #333; */
    float: left;
    border-radius: 10px;
    margin-left: 14px;
  }
  .rent_card_left img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .rent_card_right {
    width: 60%;
    height: 150px;
    /* background: #fff; */
    float: left;
    margin-left: 10px;
  }
  .rent_card_title {
    font-weight: bolder;
    font-size: 16px;
  }
  .rent_card_user {
    font-size: 14px;
    font-weight: 400;
  }
  .rent_card_list {
    width: 160px;
    height: 50px;
    font-size: 10px;
    color: #a6a6a6;
    /* background: pink; */
  }
  .rent_card_phone {
    border-radius: 20px;
    display: inline-block;
    padding: 2px 5px;
    margin-top: 10px;
    border: 1px solid #a6a6a6;
  }
  .rent_card_address {
    border-radius: 20px;
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid #a6a6a6;
    font-size: 8px;
    margin-top: 10px;
    margin-bottom: 8px;
  }
  .rent_card_date {
    display: inline-block;
    background: #43cf7c;
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    margin-top: 20px;
  }
}
@media screen and (min-width: 414px) {
  .tabs {
    width: 100%;
    height: 60px;
    background: #5a78ec;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    position: fixed;
    /* margin-top: 25px; */
    z-index: 1000;
  }
  .tab_list1,
  .tab_list2,
  .tab_list3 {
    display: block;
    margin-top: 20px;
    color: #fff;
  }
  .tab_list1:hover,
  .tab_list2:hover,
  .tab_list3:hover {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 18px;
    border-bottom: 4px solid #fff;
  }
  #active {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 18px;
    border-bottom: 4px solid #fff;
  }
  .box {
    width: 100%;
    height: 800px;
    background: #ececec;
    z-index: -1;
  }
  .rent_card {
    width: 90%;
    height: 200px;
    /* background: pink; */
    background: #ffffff;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 14px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    top: 70px;
  }
  .rent_card_left {
    width: 35%;
    height: 180px;
    /* border: 1px solid #333; */
    float: left;
    border-radius: 10px;
    margin-left: 14px;
  }
  .rent_card_left img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .rent_card_right {
    width: 60%;
    height: 170px;
    /* background: #fff; */
    float: left;
    margin-left: 10px;
  }
  .rent_card_title {
    font-weight: bolder;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .rent_card_user {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
  }
  .rent_card_list {
    width: 200px;
    height: 50px;
    font-size: 10px;
    color: #a6a6a6;
    /* background: pink; */
  }
  .rent_card_phone {
    border-radius: 20px;
    display: inline-block;
    padding: 2px 5px;
    margin-top: 12px;
    border: 1px solid #a6a6a6;
  }
  .rent_card_address {
    border-radius: 20px;
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid #a6a6a6;
    font-size: 8px;
    margin-top: 12px;
    margin-bottom: 8px;
  }
  .rent_card_date {
    display: inline-block;
    background: #43cf7c;
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    margin-top: 30px;
  }
}
@media screen and (min-width: 768px) {
  .tabs {
    width: 100%;
    height: 80px;
    background: #5a78ec;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    position: fixed;
    /* margin-top: 25px; */
    z-index: 1000;
    font-size: 22px;
  }
  .tab_list1,
  .tab_list2,
  .tab_list3 {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 22px;
  }
  .tab_list1:hover,
  .tab_list2:hover,
  .tab_list3:hover {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 28px;
    border-bottom: 4px solid #fff;
  }
  #active {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 28px;
    border-bottom: 4px solid #fff;
  }
  .box {
    width: 100%;
    height: 1200px;
    background: #ececec;
    z-index: -1;
  }
  .rent_card {
    width: 90%;
    height: 200px;
    /* background: pink; */
    background: #ffffff;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 14px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    top: 90px;
    padding: 15px 0;
  }
  .rent_card_left {
    width: 25%;
    height: 180px;
    /* border: 1px solid #333; */
    float: left;
    border-radius: 10px;
    margin-left: 14px;
  }
  .rent_card_left img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .rent_card_right {
    width: 60%;
    height: 170px;
    /* background: #fff; */
    float: left;
    margin-left: 10px;
  }
  .rent_card_title {
    font-weight: bolder;
    font-size: 20px;
  }
  .rent_card_user {
    font-size: 18px;
    font-weight: 400;
  }
  .rent_card_list {
    width: 160px;
    height: 50px;
    font-size: 14px;
    color: #a6a6a6;
    /* background: pink; */
  }
  .rent_card_phone {
    border-radius: 20px;
    display: inline-block;
    padding: 2px 5px;
    margin-top: 8px;
    font-size: 10px;
    border: 1px solid #a6a6a6;
  }
  .rent_card_address {
    border-radius: 20px;
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid #a6a6a6;
    font-size: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .rent_card_date {
    display: inline-block;
    background: #43cf7c;
    color: #fff;
    padding: 2px 5px;
    font-size: 16px;
    margin-top: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .tabs {
    width: 100%;
    height: 80px;
    background: #5a78ec;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    position: fixed;
    /* margin-top: 25px; */
    z-index: 1000;
    font-size: 22px;
  }
  .tab_list1,
  .tab_list2,
  .tab_list3 {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 22px;
  }
  .tab_list1:hover,
  .tab_list2:hover,
  .tab_list3:hover {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 28px;
    border-bottom: 4px solid #fff;
  }
  #active {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 28px;
    border-bottom: 4px solid #fff;
  }
  .box {
    width: 100%;
    height: 1500px;
    background: #ececec;
    z-index: -1;
  }
  .rent_card {
    width: 90%;
    height: 360px;
    /* background: pink; */
    background: #ffffff;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    top: 90px;
  }
  .rent_card_left {
    width: 35%;
    height: 300px;
    /* border: 1px solid #333; */
    float: left;
    border-radius: 10px;
    margin-left: 14px;
  }
  .rent_card_left img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    font-size: 22px;
  }
  .rent_card_right {
    width: 60%;
    height: 280px;
    /* background: #fff; */
    float: left;
    margin-left: 10px;
  }
  .rent_card_title {
    font-weight: bolder;
    font-size: 24px;
    margin-bottom: 20px;
  }
  .rent_card_user {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 20px;
  }
  .rent_card_list {
    width: 280px;
    height: 50px;
    font-size: 16px;
    color: #a6a6a6;
    /* background: pink; */
  }
  .rent_card_phone {
    border-radius: 20px;
    display: inline-block;
    padding: 2px 5px;
    margin-top: 20px;
    font-size: 18px;
    border: 1px solid #a6a6a6;
  }
  .rent_card_address {
    border-radius: 20px;
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid #a6a6a6;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .rent_card_date {
    display: inline-block;
    background: #43cf7c;
    color: #fff;
    padding: 2px 5px;
    font-size: 20px;
    margin-top: 100px;
  }
}
</style>
